<template>
  <el-drawer
    title="画像自动差异分析"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    ref="tagDrawer"
    @closed="clearDrawer"
    custom-class="tag-drawer customers-edit-drawer"
    v-drawerResize
  >
    <div class="drawer-wrap" v-loading="loading">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" label-width="160px" :rules="editFormRules" ref="editForm">
          <el-form-item prop="tagNm" label="分析任务名称">
            <el-input placeholder="请输入分析任务名称" v-model="editForm.tagNm"></el-input>
          </el-form-item>
          <el-form-item prop="tagStory" label="备注">
            <el-input
              type="textarea"
              placeholder="请输入备注"
              v-model="editForm.tagStory"
              :rows="3"
              :maxlength="200"
              :show-word-limit="true"
              resize="none"
            ></el-input>
          </el-form-item>
          <el-form-item prop="sourcePortrait" label="源画像">
            <el-select v-model="editForm.sourcePortrait" filterable>
              <el-option
                v-for="item in portraitList"
                :key="item.portraitId"
                :value="item.portraitId"
                :label="item.portraitNm"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="sourceHistoricalTime" label="源画像历史版本">
            <el-date-picker
              type="month"
              value-format="yyyyMM"
              v-model="editForm.sourceHistoricalTime"
              placeholder="选择时间"
              :picker-options="pickOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item prop="contrastPortrait" label="对比画像">
            <el-select v-model="editForm.contrastPortrait" filterable>
              <el-option
                v-for="item in portraitList"
                :key="item.portraitId"
                :value="item.portraitId"
                :label="item.portraitNm"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="contrastHistoricalTime" label="对比画像历史版本">
            <el-date-picker
              type="month"
              value-format="yyyyMM"
              v-model="editForm.contrastHistoricalTime"
              placeholder="选择时间"
              :picker-options="pickOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item prop="simTopNum" label="相似度TOP展示">
            <el-input-number
              v-model="editForm.simTopNum"
              :min="1"
              :max="30"
              :step="1"
              :step-strictly="true"
            ></el-input-number>
          </el-form-item>
          <el-form-item prop="diffTopNum" label="差异度TOP展示">
            <el-input-number
              v-model="editForm.diffTopNum"
              :min="1"
              :max="30"
              :step="1"
              :step-strictly="true"
            ></el-input-number>
          </el-form-item>

          <el-form-item label="执行频率" prop="execFrequency" class="check-form">
            <el-radio-group v-model="editForm.execFrequency">
              <el-radio :label="0">不更新</el-radio>
              <el-radio :label="1">日</el-radio>
              <el-radio :label="2">月</el-radio>
              <el-radio :label="3">周</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="执行日期" prop="execDtList" v-if="editForm.execFrequency === 2" class="rate-form">
            <el-checkbox-group v-model="editForm.execDtList">
              <el-checkbox v-for="date in 31" :label="date" :key="date">{{ date }}</el-checkbox>
              <el-checkbox :label="999">月末</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="执行星期" prop="execWkList" v-if="editForm.execFrequency === 3" class="rate-form">
            <el-checkbox-group v-model="editForm.execWkList">
              <el-checkbox v-for="week in 7" :label="week" :key="week">{{ weekShow(week) }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="执行时间" prop="execTm" v-if="editForm.execFrequency !== 0">
            <el-col :span="12">
              <el-time-picker v-model="editForm.execTm" placeholder="执行时间" value-format="HH:mm:ss"></el-time-picker>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="closeDrawer">取消</el-button>
      <el-button type="primary" size="medium" @click="save" :loading="loading">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
      loading: false,
      portraitList: [],
      editForm: {
        groupId: '',
        tagId: '',
        tagNm: '',
        tagStory: '',
        sourcePortrait: '',
        sourceHistoricalTime: '',
        contrastPortrait: '',
        contrastHistoricalTime: '',
        simTopNum: 10,
        diffTopNum: 10,
        execFrequency: 0,
        execDtList: [],
        execWkList: [],
        execTm: ''
      },
      editFormRules: {
        tagNm: [{ required: true, message: '分析任务名称不能为空', trigger: 'blur' }],
        sourcePortrait: [{ required: true, message: '源画像不能为空', trigger: 'change' }],
        contrastPortrait: [{ required: true, message: '对比画像不能为空', trigger: 'change' }],
        simTopNum: [{ required: true, message: '相似度TOP展示不能为空', trigger: 'blur' }],
        diffTopNum: [{ required: true, message: '差异度TOP展示不能为空', trigger: 'blur' }],
        execFrequency: [{ required: true, message: '请确认执行频率', trigger: 'change' }],
        execDtList: [{ required: true, type: 'array', min: 1, message: '至少要选择一项', trigger: 'change' }],
        execWkList: [{ required: true, type: 'array', min: 1, message: '至少要选择一项', trigger: 'change' }],
        execTm: [{ required: true, message: '执行时间不能为空', trigger: 'change' }]
      },
      pickOptions: {
        disabledDate(time) {
          return time.getTime() > new Date().getTime()
        }
      }
    }
  },
  methods: {
    showDrawer(params) {
      this.editForm.groupId = params.data.groupId
      if (params.type === 'edit') {
        this.editForm.tagId = params.data.tagId
        this.editForm.tagNm = params.data.tagNm
        this.editForm.tagStory = params.data.tagStory
        this.editForm.sourcePortrait = params.data.sourcePortrait
        this.editForm.sourceHistoricalTime = params.data.sourceHistoricalTime
        this.editForm.contrastPortrait = params.data.contrastPortrait
        this.editForm.contrastHistoricalTime = params.data.contrastHistoricalTime
        this.editForm.simTopNum = params.data.simTopNum
        this.editForm.diffTopNum = params.data.diffTopNum
        this.editForm.execFrequency = params.data.execFrequency
        this.editForm.execDtList = params.data.execDtList || []
        this.editForm.execWkList = params.data.execWkList || []
        this.editForm.execTm = params.data.execTm || ''
      }
      this.getPortraitList()
      this.drawerVisible = true
    },
    getPortraitList() {
      this.$ajax({
        url: this.$ajax.setUrl('DiffCustomerPortraits/getAstTagDerived'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.portraitList = data.data || []
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    weekShow(week) {
      let str = ''
      switch (week) {
        case 1:
          str = '日'
          break
        case 2:
          str = '一'
          break
        case 3:
          str = '二'
          break
        case 4:
          str = '三'
          break
        case 5:
          str = '四'
          break
        case 6:
          str = '五'
          break
        case 7:
          str = '六'
          break
      }
      return str
    },
    save() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$ajax({
            url: this.$ajax.setUrl('DiffCustomerPortraits/getDiffCustomerPortraits'),
            method: 'post',
            data: this.$ajax.setData(this.getParams()),
            timeout: 0
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$message.success(data.msg)
              this.$emit('save', this.editForm.groupId)
              this.closeDrawer()
            } else {
              this.$message.error(data.data || data.msg)
            }
            this.loading = false
          })
        }
      })
    },
    getParams() {
      let params = {
        groupId: this.editForm.groupId,
        tagId: this.editForm.tagId,
        tagNm: this.editForm.tagNm,
        tagStory: this.editForm.tagStory,
        sourcePortrait: this.editForm.sourcePortrait,
        sourceHistoricalTime: this.editForm.sourceHistoricalTime,
        contrastPortrait: this.editForm.contrastPortrait,
        contrastHistoricalTime: this.editForm.contrastHistoricalTime,
        simTopNum: this.editForm.simTopNum,
        diffTopNum: this.editForm.diffTopNum,
        execFrequency: this.editForm.execFrequency
      }
      if (params.execFrequency !== 0) {
        params.execTm = this.editForm.execTm
      }
      if (params.execFrequency === 2) {
        params.execDtList = this.editForm.execDtList
      }
      if (params.execFrequency === 3) {
        params.execWkList = this.editForm.execWkList
      }
      return params
    },
    closeDrawer() {
      this.$refs.tagDrawer.closeDrawer()
    },
    clearDrawer() {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>

<style lang="scss">
.customers-edit-drawer {
  .check-form {
    margin-bottom: 6px;
  }
  .rate-form {
    margin-bottom: 10px;
    .el-form-item__error {
      margin-top: -12px;
    }
    .el-checkbox {
      min-width: 40px;
    }
  }
}
</style>
